<template>
  <div class="addFrom">
    <div class="att-header">
      <div class="verticalLine"></div>项目人员信息添加
      <svg title="搜索 " class="iconsousuo ic" aria-hidden="true" @click="Return">
        <use xlink:href="#iconfill-closed" />
      </svg>
    </div>
    <ul>
      <li>
        <span>登录名</span>
        <el-input v-model="input1" placeholder="请输入登录名" ></el-input>
        <p class="reg">{{reg.input1}}</p>
      </li>
      <li>
        <span>密码</span>
        <el-input v-model="input2" placeholder="请输入密码"></el-input>
      </li>
      <li>
        <span>真实姓名</span>
        <el-input v-model="input14" placeholder="请输入真实姓名" ></el-input>
        <p class="reg">{{reg.input14}}</p>
      </li>
      <li>
        <p>性别</p>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
      <li>
        <span>年龄</span>
        <el-input v-model="input3" placeholder="请输入年龄"></el-input>
      </li>
      <li>
        <span>身份证号</span>
        <el-input v-model="input4" placeholder="请输入身份证号" ></el-input>
        <p class="reg">{{reg.input4}}</p>
      </li>
      <li>
        <span>手机号</span>
        <el-input v-model="input5" placeholder="请输入手机号"></el-input>
      </li>
      <li>
        <span>单位名称</span>
        <el-input v-model="input6" placeholder="请输入单位名称"></el-input>
      </li>
      <li>
        <p>职位名称</p>
        <el-select v-model="input7" placeholder="请选择">
          <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </li>
  
      <li>
        <span>紧急联系人姓名</span>
        <el-input v-model="input8" placeholder="请输入紧急联系人姓名"></el-input>
      </li>
      <li>
        <span>紧急联系人电话</span>
        <el-input v-model="input9" placeholder="请输入紧急联系人电话"></el-input>
      </li>
      <li>
        <span>填报人名称</span>
        <el-input v-model="input10" placeholder="请输入填报人名称" :readonly="true"></el-input>
      </li>
    </ul>
    <div class="att-btn">
      <span @click="confirm">提交</span>
    </div>
  </div>
</template>
<script>
import { add, obtainPosition } from "@/service/personnel/index";
export default {
  data() {
    return {
      gettime: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      input6: "",
      input7: "",
      input8: "",
      input9: "",
      input10: "",
      input14: "",
      value1: "",
      list:"",
      options1: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ],
      flag:true,
      reg:{
        input1:"",
        input14:""
      }
    };
  },
  created:function(){
    obtainPosition().then(res=>{
      // window.console.log(res)
      this.list=res.data.obj.map(item=>{
        return {value:item.id,label:item.positionName}
      })
    })
  },
  methods: {
    // onInputBlur(){
    //   const inputReg= /[\u4e00-\u9fa5]{2,6}/g
    //   if(!this.input1.match(inputReg)){
    //     this.reg.input1="只能输入2-6个中文"
    //   }else{
    //     this.reg.input1=""
    //   }
    // },
    // realName() {
    //   const inputReg= /[\u4e00-\u9fa5]{2,5}/g
    //   if(!this.input14.match(inputReg)){
    //     this.reg.input14="只能输入2-个中文"
    //     this.flag=false
    //   }else{
    //     this.reg.input14=""
    //     this.flag=true
    //   }
    // },
    // identityCard(){
    //   const inputReg= /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
    //   if(!this.input4.match(inputReg)){
    //     this.reg.input4="输入正确的省份证号码"
    //     this.flag=false
    //   }else{
    //     this.reg.input4=""
    //     this.flag=true
    //     alert(666)
    //   }
    // },
    Return() {
      window.history.go(-1);
    },
    confirm() {
      // const myDate = new Date();
      const yy = new Date().getFullYear();
      const mm = new Date().getMonth() + 1;
      const dd = new Date().getDate();
      const hh = new Date().getHours();
      const mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      window.console.log(this.gettime);
      const params = {
        loginName: this.input1,
        password: this.input2,
        name: this.input14,
        sex: this.value1,
        age: this.input3,
        cardNum: this.input4,
        phoneNum: this.input5,
        unitName: this.input6,
        positionId: this.input7,
        contactName: this.input8,
        contactTel: this.input9,
        createUserId: window.sessionStorage.getItem("id"),
        createTime: this.gettime,
        upUserId: this.input12,
        updateTime: this.input13

      };
      this.$confirm("是否提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          add(params);
          this.$message({
            type: "success",
            message: "提交成功!"
          });
          window.history.go(-1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.addFrom {
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
  margin: 20px;
  background-color: #fff;
  .att-header {
        width: calc(100% - 10px);
    height: 35px;
    line-height: 35px;
    margin: 0 5px;
    svg {
      float: right;
      margin-top: 10px;
      margin-right: 50px;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
  ul {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    min-height: 300px;
    margin: 20px;
    li {
      width: -webkit-calc(100%/3 - 40px);
      width: -moz-calc(100%/3 - 40px);
      width: calc(100% / 3 - 40px);
      height: 80px;
      margin: 0 20px 20px 20px;
      float: left;
      .reg{
        color: red  
      }
    }
  }
  .att-btn {
    width: 50%;
    margin: auto;
    text-align: center;
    span {
      line-height: 50px;
      text-align: center;
      border: 1px solid #1ab394;
      padding: 10px 50px;
      margin-right: 20px;
      border-radius: 6px;
      cursor: pointer;
    }
    span:nth-child(1):hover {
      background-color: rgba(0, 0, 0, 0.3);
    }
    span:nth-child(2):hover {
      background-color: #1ab394;
    }
  }
  .verticalLine {
    width: 0px;
    height: 16px;
    border: 2px solid #1ab394;
    float: left;
    margin: 7px 8px 0 8px;
  }
}
</style>